<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>特种设备日常使用记录表单</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.2.0.css" />
    <style>
        .form-container {
            width: 100%;
            padding-top: 20px;
        }

        .form-container>h2 {
            margin: 0 auto;
            width: 500px;
            text-align: center;
        }

        .form-container>.form-wrapper {
            display: -webkit-flex;
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            padding-top: 20px;
        }

        .form-container>.form-wrapper>div {
            width: 50%;
            margin-top: 10px;
        }

        .form-container>.form-wrapper>div>span {
            vertical-align: middle;
        }

        .form-container>.form-wrapper>div>span:nth-child(1) {
            display: inline-block;
            width: 30%;
            height: 30px;
            font-size: 14px;
            text-align: center;
        }

        .form-container>.form-wrapper>div>input {
            display: inline-block;
            width: 70%;
            height: 25px !important;
            font-size: 14px;
            text-align: center;
            vertical-align: middle;
            overflow: hidden;
            border: 1px solid rgba(0, 0, 0, 0.3);
        }

        .aui-form-list-wrapper,
        .aui-form-list-info-wrapper {
            display: flex;
            display: -webkit-flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            margin: 10px 0;
        }

        .aui-form-list-wrapper>li {
            width: 33.33%;
        }

        .aui-form-list-wrapper-content {
            width: 100%;
            display: flex;
            display: -webkit-flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            margin: 10px 0;
        }

        .header {
            text-align: center;
        }

        .aui-form-list-wrapper-content>li {
            width: 50%;
        }

        .aui-list-item-label {
            width: 100% !important;
        }

        .form-submit {
            width: 100%;
            text-align: center;
            margin-top: 50px;
        }

        .form-submit>button {
            width: 170px;
            height: 50px;
            text-align: center;
            background-color: #0064B0;
            color: #fff;
            padding-bottom: 10px;
            font-size: 20px;
        }

        .aui-list-item-input {
            color: #666 !important;
        }

        .aui-list-item-label,
        .aui-list-item-input,
        input[type="text"] {
            font-size: 0.6rem;
        }

        .textarea-container {
            width: 100%;
            margin: 0 auto;
        }

        .textarea-wrapper {
            min-height: 100px;
            border: 1px solid rgba(0, 0, 0, 0.3);
            width: 97%;
            margin: 20px auto 5px auto;
            border-radius: 5px;
        }
    </style>
</head>

<body>
    <main id="app">
        <div class="form-container">
            <div class="header">
                日期
            </div>
            <div class="aui-content aui-margin-b-15">
                <ul class="aui-list aui-form-list aui-form-list-wrapper-content">
                    <li class="aui-list-item">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-label aui-list-item-input">
                                日期：
                            </div>
                            <div class="aui-list-item-input" id="duDate" onclick="getDateTime()">
                                {{getDateTime}}
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-label aui-list-item-input">
                                开机时间：
                            </div>
                            <div class="aui-list-item-input" id="duStartupTime" onclick="getTimes()">
                                {{getTimes}}
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-label">
                                累计时间：
                            </div>
                            <div class="aui-list-item-label aui-list-item-input">
                                <input type="text" id="duCumulativeTime" placeholder="累计时间" onclick="timeDifference()">
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-label">
                                关机时间：
                            </div>
                            <div class="aui-list-item-input" id="duShutdownTime" onclick="getTime()">
                                {{getTime}}
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div>
            <div class="header">
                设备名称
            </div>
            <div class="aui-content aui-margin-b-15">
                <ul class="aui-list aui-form-list aui-form-list-wrapper-content">
                    <li class="aui-list-item">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-label">
                                设备名称：
                            </div>
                            <div class="aui-list-item-input">
                                <input type="text" value="医用氧舱" id="duEquipmentName" placeholder="设备名称">
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-label">
                                介质：
                            </div>
                            <div class="aui-list-item-input">
                                <input type="text" id="duMedium" value="空气" placeholder="介质">
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-label">
                                内部编号：
                            </div>
                            <div class="aui-list-item-input">
                                <input type="text" id="duInternalNumber" value="TS-YCQ-01" placeholder="内部编号">
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-label">
                                使用证书：
                            </div>
                            <div class="aui-list-item-input">
                                <input type="text" id="duUseCertificate" value="EYC-026" placeholder="使用证书">
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item" style="width:100%;">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-label">
                                注册代码：
                            </div>
                            <div class="aui-list-item-input">
                                <input type="text" id="duRegistrCode" value="24103705022014112641" placeholder="注册代码">
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div>
            <div class="header">
                运行参数
            </div>
            <div class="aui-content aui-margin-b-15">
                <ul class="aui-list aui-form-list aui-form-list-wrapper-content">
                    <li class="aui-list-item">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-label">
                                治疗人数：
                            </div>
                            <div class="aui-list-item-input">
                                <input type="text" id="duPatientsTreated" placeholder="治疗人数">
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-label">
                                压力<span>Mpa</span>：
                            </div>
                            <div class="aui-list-item-input">
                                <input type="text" id="duPressure" placeholder="压力">
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item" style="width:100%;">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-label">
                                温度<span>°C</span>：
                            </div>
                            <div class="aui-list-item-input">
                                <input type="text" id="duTemperature" placeholder="温度">
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div>
            <div class="header">
                运行状况
            </div>
            <div class="aui-content aui-margin-b-15">
                <ul class="aui-list aui-form-list aui-form-list-wrapper-content">
                    <li class="aui-list-item">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-label">
                                正常/异常：
                            </div>
                            <div class="aui-list-item-input">
                                <input type="text" id="duState" placeholder="正常/异常">
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-label">
                                异常情况描述：
                            </div>
                            <div class="aui-list-item-input">
                                <input type="text" id="duSituDescription" placeholder="异常情况描述">
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item" style="width:100%;">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-label">
                                处理情况：
                            </div>
                            <div class="aui-list-item-input">
                                <input type="text" id="duTreatment" placeholder="处理情况">
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-label aui-list-item-input">
                                签名：
                            </div>
                            <div class="aui-list-item-input">
                                <input type="text" id="duOperatores" placeholder="请填写签名">
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="textarea-container">
            <div>备注</div>
            <div contenteditable="true" class="textarea-wrapper" id="duRemarks">
            </div>
        </div>
        <div class="form-submit">
            <button onclick="updateHoDailyUse()">修改</button>
            <button onclick="getHoDailyUse()">查看</button>
        </div>
    </main>
</body>

</html>

<script src="../script/api.js" charset="utf-8" type="text/javascript"></script>
<script src="../script/vue.js" charset="utf-8" type="text/javascript"></script>
<script src="../js/jquery.min.js" charset="utf-8" type="text/javascript"></script>
<script src="../js/ToConfigure.js" charset="utf-8" type="text/javascript"></script>
<script src="../script/aui-toast.js" charset="utf-8" type="text/javascript"></script>
<script src="../script/aui-dialog.js" charset="utf-8" type="text/javascript"></script>
<script src="../script/aui-tab.js" charset="utf-8" type="text/javascript"></script>
<script type="text/javascript">
    // window.apiready = function () {
    //         /**
    //          * 查询当前信息
    //          * */
    //          getHoDailyUse();
    //     } 
    var vm;
    apiready = function () {
        vm = new Vue({
            el: '#app',
            data: {
                Query_UserList: [], //舱室操舱人员信息
                getDateTime: '选择日期',
                getTime: '选择时间',
                getTimes: '选择时间'
            },
            created() {

            },
            watch: {
                searchInfo: function () { }
            },
            methods: {

            },
        })
    }


    function getTime() {
        api.openPicker({
            type: 'time',
            date: '08:30',
            title: '选择升压时间'
        }, function (ret, err) {
            if (ret) {
                vm.getTime = ret.hour +
                    ':' + ret.minute;
                console.log(ret.minute);
            }
        });
    }

    

    /**
      * 查询特种设备事故隐患登记台账
      * @param currPage 当前页
    */
    function getHoDailyUse() {
        //定义toast提示框
        var toast = new auiToast();
        var Url_IP = ToConfigure_IP("Gorgeous");
        var jsParms = new Object();
        /**
          * 舱次唯一标识
          */
        jsParms.duId = api.pageParam.duId;
        /**
         * 请求控制器
         */
        $.ajax({
            url: Url_IP + '/disinfectioninspection/dailyuse/getHoDailyUse',
            type: 'post',
            async: false,
            contentType: "application/json",
            dataType: "json",
            data: JSON.stringify(jsParms),
            success: function (result) {
                /**
                 * 验证返回信息是否为空
                 */
                if (result.success == true) {
                    /**
                     *  循环object
                     */
                    $.each(result.data.list, function (i, o) {
                        /**
                         * 赋值唯一标识
                         */
                        $("#duId").val(o.duId);
                        /**
                         * 隐患概况
                         */
                        $("#duEquipmentName").val(o.duEquipmentName);
                        /**
                         * 来源
                         */
                        $("#duMedium").val(o.duMedium);
                        /**
                         * 隐患处理责任人
                         */
                        $("#duInternalNumber").val(o.duInternalNumber);
                        /**
                         * 整改要求
                         */
                        $("#duUseCertificate").val(o.duUseCertificate);
                        /**
                         * 治理情况
                         */
                        $("#duRegistrCode").val(o.duRegistrCode);
                        /**
                         * 确认人
                         */
                        $("#duDate").text(o.duDate);
                        /**
                         * 开机时间
                         */
                        $("#duStartupTime").text(o.duStartupTime);
                        /**
                         * 关机时间
                         */
                        $("#duShutdownTime").text(o.duShutdownTime);
                        /**
                         * 累计时间
                         */
                        $("#duCumulativeTime").val(o.duCumulativeTime);
                        /**
                         * 签字
                         */
                        $("#duOperatores").val(o.duOperatores);
                        /**
                         * 签字
                         */
                        $("#duPatientsTreated").val(o.duPatientsTreated);
                        /**
                         * 签字
                         */
                        $("#duPressure").val(o.duPressure);
                        /**
                         * 签字
                         */
                        $("#duTemperature").val(o.duTemperature);
                        /**
                         * 签字
                         */
                        $("#duState").val(o.duState);
                        /**
                         * 签字
                         */
                        $("#duSituDescription").val(o.duSituDescription);
                        /**
                         * 签字
                         */
                        $("#duTreatment").val(o.duTreatment);
                        /**
                         * 签字
                         */
                        $("#duRemarks").val(o.duRemarks);

                    })

                } else {
                    /**
                   *  提示错误信息
                   */
                    toast.fail({
                        title: "查询失败",
                        duration: 2000
                    });

                }
            },
            error: function (result) {
                /**
                     *  提示错误信息
                     */
                toast.fail({
                    title: "查询失败",
                    duration: 2000
                });
            }
        });
    }

    //跳转页面
    function JumpPage() {
        var dialog = new auiDialog();
        dialog.alert({
            title: "提示",
            msg: '操作成功，是否跳转特种设备日常使用记录',
            buttons: ['取消', '确定']
        }, function (ret) {
            if (ret.buttonIndex === 1) {

            } else if (ret.buttonIndex === 2) {
                api.openWin({
                    name: 'HO_DailyUse-header',
                    url: './HO_DailyUse-header.html',
                    pageParam: {}
                });
            }
        })
    }
    //计算时间差（相差分钟）
    function timeDifference() {
        //开始时间
        var startTime = $("#duStartupTime").text();
        //结束时间
        var endTime = $("#duShutdownTime").text();
        var start1 = startTime.split(":");
        var startAll = parseInt(start1[0] * 60) + parseInt(start1[1]);
        var end1 = endTime.split(":");
        var endAll = parseInt(end1[0] * 60) + parseInt(end1[1]);
        //console.log("时间差===" + (endAll - startAll));
        $("#duCumulativeTime").val(endAll - startAll);
    }

    /**
     * 修改特种设备事故隐患登记台账
     */
    function updateHoDailyUse() {

        var toast = new auiToast();

        //获取所属医院IP地址
        var Url_IP = ToConfigure_IP("Gorgeous");
        //当前登陆人
        userName = api.pageParam["userName"]
        /**
         * 请求控制器
         */
        $.ajax({
            url: Url_IP + '/disinfectioninspection/dailyuse/updateHoDailyUse',
            type: 'post',
            async: false,
            contentType: "application/json",
            dataType: "json",
            data: parameter(),
            success: function (result) {
                /**
                 * 验证返回信息是否为空
                 */
                if (result.success == true) {
                    /**
                     * 
                     * 跳转页面
                     * */
                    JumpPage()
                } else {
                    /**
                      *  提示错误信息
                      */
                    toast.fail({
                        title: "修改失败",
                        duration: 2000
                    });
                }
            },
            error: function (result) {
                /**
                  *  提示错误信息
                  */
                toast.fail({
                    title: "修改失败",
                    duration: 2000
                });
            }
        })
    }





    /**
     * 获取参数信息
     * @param type 操作类型（1：修改    2：添加）
     * @returns {string}
     */
    function parameter() {
        var jsParms = new Object();
        if(api.pageParam.duId>0){
        /**
         * 
         * 操舱记录单
         * */
         jsParms.duId = api.pageParam.duId;
        }
        /**
         * 隐患概况
         */
        jsParms.duEquipmentName = $("#duEquipmentName").val();
        /**
         * 来源
         */
        jsParms.duMedium = $("#duMedium").val();
        /**
         * 隐患处理责任人
         */
        jsParms.duInternalNumber = $("#duInternalNumber").val();

        /**
         * 整改要求
         */
        jsParms.duUseCertificate = $("#duUseCertificate").val();
        /**
         * 治理情况
         */
        jsParms.duRegistrCode = $("#duRegistrCode").val();
        /**
         * 日期
         */
        jsParms.duDate = $("#duDate").text();
        /**
         * 开始时间
         */
        jsParms.duStartupTime = $("#duStartupTime").text();
        /**
         * 累计时间
         */
        jsParms.duCumulativeTime = $("#duCumulativeTime").val();
        /**
         * 结束时间
         */
        jsParms.duShutdownTime = $("#duShutdownTime").text();
        /**
         * 备注
         */
        jsParms.duOperatores = api.pageParam["userName"];
        /**
         * 备注
         */
        jsParms.duPatientsTreated = $("#duPatientsTreated").val();
        /**
         * 备注
         */
        jsParms.duPressure = $("#duPressure").val();
        /**
         * 备注
         */
        jsParms.duTemperature = $("#duTemperature").val();
        /**
         * 备注
         */
        jsParms.duState = $("#duState").val();
        /**
         * 备注
         */
        jsParms.duSituDescription = $("#duSituDescription").val();
        /**
         * 备注
         */
        jsParms.duTreatment = $("#duTreatment").val();
        /**
         * 备注
         */
        jsParms.duRemarks = $("#duRemarks").text();

        /**
         * 转成json数据
         */
        return JSON.stringify(jsParms);
    }







    function getDateTime() {
        api.openPicker({
            type: 'date_time',
            title: '选择开始日期'
        }, function (ret, err) {
            if (ret) {
                var year = ret.year;
                var month = ret.month;
                var day = ret.day;
                vm.getDateTime = '' + year +
                    '-' + month +
                    '-' + day
            }
        });
    }


    function getTime() {
        api.openPicker({
            type: 'time',
            title: '请选择时间'
        }, function (ret1, err1) {
            if (ret1) {
                vm.getTime = '' + ret1.hour + ':' + ret1.minute + ':00'
            }
        });
    }

    function getTimes() {
        api.openPicker({
            type: 'time',
            title: '请选择时间'
        }, function (ret1, err1) {
            if (ret1) {
                vm.getTimes = '' + ret1.hour + ':' + ret1.minute + ':00'
            }
        });
    }

    function closewin() {
        api.closeWin({
            name: 'disinfection-record-form'
        });
    }
</script>